<template>
	<view class="content">
		<!-- Class List -->
		<view class="class-list">
			<view class="class-item" v-for="(item, index) in classList" :key="index" @click="selectClass(item)">
				<view class="class-header">
					<text class="class-name">{{item.className}}</text>
				</view>
				<view class="class-info">
					<view class="info-row">
						<u-icon name="account" size="16" color="#666"></u-icon>
						<text class="info-text">班级人数：{{item.classSize}}</text>
					</view>
					<view class="info-row">
						<u-icon name="calendar" size="16" color="#666"></u-icon>
						<text class="info-text">上课时间：{{item.note}}</text>
					</view>
				</view>
			</view>
		</view>

		<!-- Feature Menu -->
		<view class="feature-menu" v-if="selectedClass">
			<view class="menu-title">班级功能</view>
			<view class="menu-grid">
				<view class="menu-item" @click="showTeacherInfo">
					<u-icon name="account" size="32" color="#2979ff"></u-icon>
					<text>老师介绍</text>
				</view>
				<view class="menu-item" @click="showClassSchedule">
					<u-icon name="calendar" size="32" color="#2979ff"></u-icon>
					<text>课程表</text>
				</view>
				<view class="menu-item" @click="uploadWork">
					<u-icon name="upload" size="32" color="#2979ff"></u-icon>
					<text>上传作品</text>
				</view>
				<view class="menu-item" @click="showAttendance">
					<u-icon name="calendar" size="32" color="#2979ff"></u-icon>
					<text>查看考勤</text>
				</view>
			</view>
		</view>

		<!-- Course Schedule Popup -->
		<u-popup :show="showSchedule" mode="center" @close="showSchedule = false" round="10">
			<view class="schedule-popup">
				<view class="schedule-header">
					<text class="schedule-title">课程表</text>
					<u-icon name="close" size="20" color="#666" @click="showSchedule = false"></u-icon>
				</view>
				<view class="schedule-content">
					<view class="classroom-info">
						<text class="classroom-name">教室：{{scheduleList[0].classRoom}}</text>
					</view>
					<view class="schedule-grid">
						<view class="time-column">
							<view class="time-slot" v-for="(time, index) in timeSlots" :key="index">
								<text class="time-text">{{time}}</text>
							</view>
						</view>
						<view class="schedule-columns">
							<view class="week-item" v-for="(day, index) in weekDays" :key="index">
								<text class="week-day">{{day}}</text>
								<view class="course-slots">
									<view class="course-item" 
										v-for="(time, timeIndex) in timeSlots" 
										:key="timeIndex"
										:class="{'has-class': isTimeSlotActive(day, time)}">
										<text class="course-name">{{getScheduleItem(day, time)}}</text>
									</view>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</u-popup>

		<!-- Attendance Popup -->
		<u-popup :show="showAttendancePopup" mode="center" @close="showAttendancePopup = false" round="10">
			<view class="attendance-popup">
				<view class="attendance-header">
					<text class="attendance-title">考勤记录</text>
					<u-icon name="close" size="20" color="#666" @click="showAttendancePopup = false"></u-icon>
				</view>
				<view class="attendance-content">
					<view class="attendance-list">
						<view class="attendance-item" v-for="(item, index) in attendanceList" :key="index">
							<view class="attendance-date">
								<text class="date-text">考勤时间：{{item.attendDate}}</text>
								<text class="status-text" :class="item.status === '正常' ? 'status-present' : 'status-absent'">
									{{item.status}}
								</text>
							</view>
							<view class="attendance-info">
								<text class="info-text">考勤分数：{{item.attendSocre}}</text>
								<text class="time-text" v-if = "item.note">备注：{{item.note}}</text>
							</view>
						
						</view>
					</view>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import { showClass, myAttend,schedule } from '@/api/class.js'
	
	export default {
		data() {
			return {
				selectedClass: null,
				showSchedule: false,
				showAttendancePopup: false,
				weekDays: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
				timeSlots: ['08:00-10:00', '10:00-12:00', '14:00-16:00', '16:00-18:00', '19:00-21:00'],
				scheduleData: {},
				scheduleList: [],
				classList: [
					{
						className: '高一数学提高班',
						status: '进行中',
						teacherName: '张老师',
						classTime: '每周一、三 19:00-21:00',
						classroom: '101教室'
					},
				],
				attendanceList: [
					{
						attendDate: '2024-03-18',
						status: '出勤',
						attendSocre: '19:00-21:00',
						note: ''
					},
				]
			}
		},
		computed: {
			classroomName() {
				return this.selectedClass && this.selectedClass.classroom ? this.selectedClass.classroom : '101教室'
			}
		},
		onLoad() {
			this.windowInfo = uni.getWindowInfo()
			this.getClassInfo()
			this.getMyAttend()
			this.getSchedule()
		},
		
		methods: {
			// 获取班级列表
			getClassInfo() {
				const studentId = 1
				const data = {
					studentId: studentId,
				}
				showClass(data).then(res =>{
					console.log(res,8888)
					this.classList = res.data.classList
				})
			},
			// 考勤
			getMyAttend(){
				const studentId = 1
				const classId = 1
				const data = {
					studentId: studentId,
					classId:classId,
				}
				myAttend(data).then(res =>{
					console.log(res,7777)
					this.attendanceList = res.data.attendList
				})
			},
			getSchedule(){
				const classId = 1
				const data = {
					classId: classId,
				}
				schedule(data).then(res => {
					console.log(res, 22222)
					this.scheduleList = res.data.scheduleList
					this.mapScheduleData()
				})
			},
			selectClass(item) {
				this.selectedClass = item;
			},
			showTeacherInfo() {
				uni.navigateTo({
					url: '/pages/teacher/teacher'
				});
			},
			showClassSchedule() {
				this.showSchedule = true;
			},
			uploadWork() {
				uni.chooseImage({
					count: 1,
					success: (res) => {
						// 处理图片上传
						uni.showToast({
							title: '上传成功',
							icon: 'success'
						});
					}
				});
			},
			showAttendance() {
				this.showAttendancePopup = true;
			},
			mapScheduleData() {
				// 初始化数据结构
				const scheduleMap = {}
				this.weekDays.forEach(day => {
					scheduleMap[day] = {}
					this.timeSlots.forEach(time => {
						scheduleMap[day][time] = null
					})
				})
				
				// 映射课程数据
				this.scheduleList.forEach(schedule => {
					const day = this.weekDays[parseInt(schedule.weekday) - 1]
					const timeSlot = `${schedule.startTime.substring(0, 5)}-${schedule.endTime.substring(0, 5)}`
					
					if (scheduleMap[day] && scheduleMap[day][timeSlot] !== undefined) {
						scheduleMap[day][timeSlot] = {
							classRoom: schedule.classRoom,
							scheduleId: schedule.scheduleId,
							status: schedule.scheduleStatus
						}
					}
				})
				
				this.scheduleData = scheduleMap
			},
			getScheduleItem(day, time) {
				const item = this.scheduleData[day] && this.scheduleData[day][time]
				return item ? item.classRoom : ''
			},
			isTimeSlotActive(day, time) {
				return this.scheduleData[day] && this.scheduleData[day][time] !== null
			}
		}
	}
</script>

<style lang="scss" scoped>
.content {
	min-height: 100vh;
	background-color: #f8f8f8;
	padding: 20rpx;
}

.class-list {
	.class-item {
		background-color: #fff;
		border-radius: 16rpx;
		padding: 24rpx;
		margin-bottom: 20rpx;
		box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.05);

		.class-header {
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin-bottom: 16rpx;

			.class-name {
				font-size: 32rpx;
				font-weight: bold;
				color: #333;
			}
		}

		.class-info {
			.info-row {
				display: flex;
				align-items: center;
				margin-bottom: 8rpx;

				.info-text {
					font-size: 26rpx;
					color: #666;
					margin-left: 8rpx;
				}
			}
		}
	}
}

.feature-menu {
	background-color: #fff;
	border-radius: 16rpx;
	padding: 24rpx;
	margin-top: 30rpx;
	box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.05);

	.menu-title {
		font-size: 32rpx;
		font-weight: bold;
		color: #333;
		margin-bottom: 24rpx;
	}

	.menu-grid {
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		gap: 30rpx;

		.menu-item {
			display: flex;
			flex-direction: column;
			align-items: center;
			padding: 20rpx;
			background-color: #f8f8f8;
			border-radius: 12rpx;
			transition: all 0.3s;

			&:active {
				background-color: #e6f7ff;
			}

			text {
				font-size: 26rpx;
				color: #333;
				margin-top: 12rpx;
			}
		}
	}
}

.schedule-popup {
	width: 750rpx;
	background-color: #fff;
	border-radius: 20rpx;
	padding: 30rpx;
	
	.schedule-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 20rpx;
		
		.schedule-title {
			font-size: 32rpx;
			font-weight: bold;
			color: #333;
		}
	}

	.classroom-info {
		margin-bottom: 20rpx;
		padding: 10rpx 0;
		border-bottom: 1px solid #eee;

		.classroom-name {
			font-size: 28rpx;
			color: #333;
			font-weight: 500;
		}
	}
	
	.schedule-content {
		.schedule-grid {
			display: flex;
			
			.time-column {
				width: 160rpx;
				margin-right: 10rpx;
				padding-top: 50rpx;
				
				.time-slot {
					height: 90rpx;
					display: flex;
					align-items: center;
					padding: 0;
					box-sizing: border-box;
					
					.time-text {
						font-size: 24rpx;
						color: #666;
					}
				}
			}
			
			.schedule-columns {
				flex: 1;
				display: flex;
				justify-content: space-between;
				
				.week-item {
					flex: 1;
					text-align: center;
					
					.week-day {
						font-size: 24rpx;
						color: #666;
						height: 40rpx;
						line-height: 40rpx;
						margin-bottom: 10rpx;
						display: block;
					}
					
					.course-slots {
						.course-item {
							height: 80rpx;
							padding: 10rpx;
							border-radius: 8rpx;
							margin-bottom: 10rpx;
							background-color: #f5f5f5;
							box-sizing: border-box;
							
							&:last-child {
								margin-bottom: 0;
							}
							
							&.has-class {
								background-color: #e6f7ff;
								
								.course-name {
									color: #2979ff;
								}
							}
							
							.course-name {
								font-size: 24rpx;
								color: #999;
								display: block;
								line-height: 1.4;
							}
						}
					}
				}
			}
		}
	}
}

.attendance-popup {
	width: 650rpx;
	background-color: #fff;
	border-radius: 20rpx;
	padding: 30rpx;
	
	.attendance-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 30rpx;
		
		.attendance-title {
			font-size: 32rpx;
			font-weight: bold;
			color: #333;
		}
	}
	
	.attendance-content {
		max-height: 800rpx;
		overflow-y: auto;
		
		.attendance-list {
			.attendance-item {
				padding: 20rpx;
				border-bottom: 1px solid #eee;
				
				&:last-child {
					border-bottom: none;
				}
				
				.attendance-date {
					display: flex;
					justify-content: space-between;
					align-items: center;
					margin-bottom: 10rpx;
					
					.date-text {
						font-size: 28rpx;
						color: #333;
						font-weight: 500;
					}
					
					.status-text {
						font-size: 26rpx;
						padding: 4rpx 16rpx;
						border-radius: 20rpx;
						
						&.status-present {
							background-color: #e6f7ff;
							color: #2979ff;
						}
						
						&.status-absent {
							background-color: #fff1f0;
							color: #ff4d4f;
						}
					}
				}
				
				.attendance-info {
					display: flex;
					justify-content: space-between;
					margin-bottom: 8rpx;
					
					.info-text {
						font-size: 26rpx;
						color: #666;
					}
					
					.time-text {
						font-size: 26rpx;
						color: #666;
					}
				}
				
				.attendance-note {
					.note-text {
						font-size: 24rpx;
						color: #999;
					}
				}
			}
		}
	}
}
</style>
